import TimePicker from "ant-design-vue/es/time-picker";
import "ant-design-vue/lib/time-picker/style/css";

import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
export default {
  name: "FormTimePicker",
  props: {
    option: {
      type: Object,
      default() {
        return {};
      }
    },
    value: [Object, String]
  },
  model: {
    prop: "value",
    event: "updata"
  },
  data() {
    return {};
  },
  computed: {
    dateValue() {
      let val = this.value ? this.value : "";
      if (val && typeof val === "string") {
        val = moment(val, this.format);
      }
      return val;
    }
  },
  created() {
    this.format = this.option.format ? this.option.format : "HH:mm";
  },
  methods: {
    onChange(value, timeString) {
      this.$emit("updata", value);
      this.$emit("change", value, timeString);
    },
    setFocus(is) {
      if (is) {
        this.$refs.formInput.focus();
      } else {
        this.$refs.formInput.blur();
      }
    }
  },
  render() {
    const that = this;
    const props = {
      ref: "formInput",
      props: {
        ...this.option.props,
        format: this.format
      },
      style: {
        width: this.option.width ? this.option.width : "100%"
      },
      on: {
        change: (value, timeString) => {
          that.onChange(value, timeString);
        },
        focus: e => {
          this.$emit("focus", e);
        },
        blur: e => {
          this.setFocus(false);
          this.$emit("blur", e);
        }
      }
    };
    if (this.dateValue) {
      props.props.value = this.dateValue;
    }

    return <TimePicker {...props} />;
  }
};
